<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>智慧农业管理系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    body {
      min-height: 100vh;
      background-color: #f8faf6;
      color: #334155;
    }

    /* 顶部导航栏 */
    .header {
      background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
      color: white;
      padding: 20px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 10;
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo h1 {
      font-size: 24px;
      font-weight: 700;
    }

    .user-info {
      display: flex;
      align-items: center;
    }

    .user-info span {
      margin-right: 15px;
      font-weight: 500;
    }

    .user-info .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #f1f8e9;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #4caf50;
      font-weight: 600;
      cursor: pointer;
      position: relative;
    }
    
    .dropdown-menu {
      position: absolute;
      top: 100%;
      right: 0;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
      padding: 8px 0;
      min-width: 160px;
      z-index: 100;
      display: none;
      margin-top: 10px;
    }
    
    .dropdown-menu.show {
      display: block;
    }
    
    .dropdown-item {
      display: block;
      padding: 10px 20px;
      color: #333;
      text-decoration: none;
      transition: background-color 0.2s;
    }
    
    .dropdown-item:hover {
      background-color: #f1f8e9;
      color: #2e7d32;
    }
    
    .dropdown-divider {
      height: 1px;
      background-color: #e0e0e0;
      margin: 8px 0;
    }

    /* 主内容区域 */
    .main-content {
      display: flex;
      min-height: calc(100vh - 80px);
    }

    /* 左侧导航 */
    .sidebar {
      width: 220px;
      background: #e8f5e9;
      padding: 20px 0;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 5;
    }

    .nav-group {
      margin-bottom: 30px;
    }

    .nav-title {
      color: #2e7d32;
      font-size: 16px;
      font-weight: 600;
      padding: 10px 25px;
      margin-bottom: 10px;
    }

    .nav-item {
      display: block;
      padding: 12px 25px;
      color: #334155;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .nav-item:hover {
      background-color: #c8e6c9;
      color: #2e7d32;
    }

    .nav-item.active {
      background-color: #a5d6a7;
      color: #2e7d32;
      font-weight: 500;
      border-left: 4px solid #4caf50;
    }



    /* 内容区域 */
    .content {
      flex: 1;
      padding: 30px;
    }

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #2e7d32;
      margin-bottom: 20px;
    }

    .card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      padding: 25px;
      margin-bottom: 25px;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card-title {
      font-size: 18px;
      font-weight: 600;
      color: #334155;
    }

    .btn {
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-primary {
      background-color: #4caf50;
      color: white;
    }

    .btn-primary:hover {
      background-color: #388e3c;
    }

    .btn-danger {
      background-color: #f44336;
      color: white;
    }

    .btn-danger:hover {
      background-color: #d32f2f;
    }

    /* 数据概览卡片 */
    .dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .data-card {
      background: rgba(241, 250, 238, 0.8);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.1);
      border: 1px solid rgba(76, 175, 80, 0.1);
      transition: all 0.3s ease;
    }

    .data-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(76, 175, 80, 0.2);
    }

    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: rgba(76, 175, 80, 0.15);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #4caf50;
      font-size: 20px;
      margin-bottom: 15px;
    }

    .card-title {
      font-size: 16px;
      color: #334155;
      margin-bottom: 5px;
    }

    .card-value {
      font-size: 24px;
      font-weight: 600;
      color: #1b5e20;
    }

    /* 主要内容区域 */
    .content-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 25px;
    }

    /* 公告栏 */
    .announcement-panel {
      background: rgba(241, 250, 238, 0.8);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.1);
      border: 1px solid rgba(76, 175, 80, 0.1);
      overflow: hidden;
    }

    .panel-header {
      padding: 15px 20px;
      background: rgba(76, 175, 80, 0.1);
      color: #1b5e20;
      font-size: 18px;
      font-weight: 600;
      border-bottom: 1px solid rgba(76, 175, 80, 0.1);
    }

    .announcement-list {
      padding: 15px 0;
    }

    .announcement-item {
      padding: 12px 20px;
      border-bottom: 1px solid rgba(76, 175, 80, 0.05);
      transition: all 0.3s ease;
    }

    .announcement-item:last-child {
      border-bottom: none;
    }

    .announcement-item:hover {
      background: rgba(76, 175, 80, 0.05);
    }

    .announcement-title {
      font-size: 16px;
      color: #2e7d32;
      font-weight: 500;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
    }

    .announcement-date {
      font-size: 12px;
      color: #6b7280;
      font-weight: normal;
    }

    .announcement-content {
      font-size: 14px;
      color: #4b5563;
      line-height: 1.6;
    }

    /* 数据图表 */
    .chart-panel {
      background: rgba(241, 250, 238, 0.8);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.1);
      border: 1px solid rgba(76, 175, 80, 0.1);
      padding: 20px;
      margin-bottom: 25px;
    }

    .chart-title {
      font-size: 18px;
      font-weight: 600;
      color: #1b5e20;
      margin-bottom: 15px;
    }

    /* 设备状态 */
    .device-status {
      background: rgba(241, 250, 238, 0.8);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.1);
      border: 1px solid rgba(76, 175, 80, 0.1);
      padding: 20px;
    }

    .device-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
    }

    .device-card {
      background: white;
      border-radius: 10px;
      padding: 15px;
      box-shadow: 0 2px 8px rgba(76, 175, 80, 0.05);
      border: 1px solid rgba(76, 175, 80, 0.1);
      transition: all 0.3s ease;
    }

    .device-card:hover {
      box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
    }

    .device-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .device-name {
      font-size: 16px;
      font-weight: 500;
      color: #2e7d32;
    }

    .device-status-indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #4caf50;
    }

    .device-status-indicator.offline {
      background-color: #f44336;
    }

    .device-metrics {
      font-size: 14px;
      color: #4b5563;
      margin-bottom: 8px;
    }

    .device-metrics span {
      font-weight: 500;
      color: #1b5e20;
    }

    .device-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }

    .action-btn {
      padding: 6px 10px;
      border-radius: 6px;
      text-decoration: none;
      font-size: 13px;
      transition: all 0.3s ease;
    }

    .action-btn.view {
      background: rgba(76, 175, 80, 0.1);
      color: #2e7d32;
    }

    .action-btn.view:hover {
      background: rgba(76, 175, 80, 0.2);
    }

    .action-btn.control {
      background: rgba(33, 150, 243, 0.1);
      color: #2196f3;
    }

    .action-btn.control:hover {
      background: rgba(33, 150, 243, 0.2);
    }

    /* 页脚 */
    .footer {
      background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
      color: white;
      padding: 15px 40px;
      text-align: center;
      font-size: 14px;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    }

    /* 粒子效果 */
    .particles {
      position: fixed;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }

    .particle {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      animation: float 8s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
      10%, 90% { opacity: 0.5; }
      50% { transform: translateY(-100px) rotate(180deg); opacity: 0.5; }
    }
    
    /* 图表按钮样式 */
    .chart-btn {
      padding: 6px 12px;
      margin-left: 10px;
      background: rgba(76, 175, 80, 0.1);
      border: 1px solid rgba(76, 175, 80, 0.3);
      border-radius: 4px;
      color: #2e7d32;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .chart-btn:hover {
      background: rgba(76, 175, 80, 0.2);
    }
    
    .chart-btn.active {
      background: #4caf50;
      color: white;
      border-color: #4caf50;
    }
  </style>
  <!-- 引入ECharts图表库 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script>

    // 创建动态背景粒子
    function createParticles() {
      const particles = document.querySelector('.particles');
      const colors = ['#81c784', '#a5d6a7', '#c8e6c9', '#4caf50', '#66bb6a', '#9ccc65'];

      for (let i = 0; i < 50; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');

        // 随机大小、位置、颜色和动画延迟
        const size = Math.random() * 8 + 2;
        const x = Math.random() * 100;
        const y = Math.random() * 100;
        const color = colors[Math.floor(Math.random() * colors.length)];
        const delay = Math.random() * 10;
        const duration = Math.random() * 15 + 10;

        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.backgroundColor = color;
        particle.style.left = `${x}vw`;
        particle.style.top = `${y}vh`;
        particle.style.animationDelay = `${delay}s`;
        particle.style.animationDuration = `${duration}s`;

        particles.appendChild(particle);
      }
    }

    // 页面加载完成后创建粒子
    window.addEventListener('load', createParticles);

    // 模拟公告数据
    const announcements = [
      {
        title: "系统升级通知",
        date: "2025-07-10",
        content: "系统将于7月15日22:00-次日02:00进行例行维护升级，请提前做好准备。"
      },
      {
        title: "新功能上线",
        date: "2025-07-05",
        content: "病虫害智能识别功能已正式上线，欢迎使用！"
      },
      {
        title: "夏季灌溉建议",
        date: "2025-07-01",
        content: "根据气象预测，近期气温较高，建议增加早晚灌溉频率，减少中午灌溉。"
      }
    ];

    // 渲染公告
    function renderAnnouncements() {
      const announcementList = document.querySelector('.announcement-list');
      announcementList.innerHTML = '';

      announcements.forEach(announcement => {
        const item = document.createElement('div');
        item.className = 'announcement-item';
        item.innerHTML = `
                    <div class="announcement-title">
                        <span>${announcement.title}</span>
                        <span class="announcement-date">${announcement.date}</span>
                    </div>
                    <div class="announcement-content">${announcement.content}</div>
                `;
        announcementList.appendChild(item);
      });
    }

    // 模拟设备数据
    const devices = [
      {
        id: 1,
        name: "灌溉系统-1",
        status: "online",
        temperature: 28,
        humidity: 65
      },
      {
        id: 2,
        name: "土壤监测仪-A",
        status: "online",
        temperature: 25,
        humidity: 78
      },
      {
        id: 3,
        name: "气象站-南",
        status: "offline",
        temperature: 0,
        humidity: 0
      },
      {
        id: 4,
        name: "病虫害监测仪-1",
        status: "online",
        temperature: 26,
        humidity: 70
      }
    ];

    // 渲染设备列表
    function renderDevices() {
      const deviceList = document.querySelector('.device-list');
      deviceList.innerHTML = '';

      devices.forEach(device => {
        const item = document.createElement('div');
        item.className = 'device-card';
        item.innerHTML = `
                    <div class="device-header">
                        <div class="device-name">${device.name}</div>

                    </div>
                    <div class="device-metrics">
                        <p>温度: <span>${device.temperature}°C</span></p>
                        <p>湿度: <span>${device.humidity}%</span></p>
                    </div>
                    <div class="device-actions">
                        <a href="#" class="action-btn view">查看</a>
                        <a href="#" class="action-btn control">控制</a>
                    </div>
                `;
        deviceList.appendChild(item);
      });
    }

    // 初始化图表
    let environmentChart;
    
    // 初始化环境数据图表
    function initEnvironmentChart() {
      const chartDom = document.getElementById('chartContainer');
      environmentChart = echarts.init(chartDom);
      
      // 图表配置
      const option = {
        title: {
          text: '环境数据趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['温度', '湿度', '光照强度', 'CO2浓度'],
          bottom: 0
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '温度(℃) / 湿度(%)',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true
            }
          },
          {
            type: 'value',
            name: '光照(lux) / CO2(ppm)',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true
            }
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            yAxisIndex: 0,
            data: [],
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#ff7f50'
            },
            itemStyle: {
              color: '#ff7f50'
            }
          },
          {
            name: '湿度',
            type: 'line',
            yAxisIndex: 0,
            data: [],
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#4169e1'
            },
            itemStyle: {
              color: '#4169e1'
            }
          },
          {
            name: '光照强度',
            type: 'line',
            yAxisIndex: 1,
            data: [],
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#ffd700'
            },
            itemStyle: {
              color: '#ffd700'
            }
          },
          {
            name: 'CO2浓度',
            type: 'line',
            yAxisIndex: 1,
            data: [],
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#9370db'
            },
            itemStyle: {
              color: '#9370db'
            }
          }
        ]
      };
      
      environmentChart.setOption(option);
      
      // 加载数据
      loadEnvironmentData('24hours');
    }
    
    // 加载环境数据
    function loadEnvironmentData(dataType) {
      fetch(`dataController?actionType=getEnvironmentData&dataType=${dataType}`)
        .then(response => response.json())
        .then(data => {
          // 处理数据
          const timeData = [];
          const temperatureData = [];
          const humidityData = [];
          const lightData = [];
          const co2Data = [];
          
          data.forEach(item => {
            // 格式化时间
            const date = new Date(item.recordTime);
            let timeStr;
            
            if (dataType === '7days') {
              // 7天数据显示日期
              timeStr = `${date.getMonth() + 1}/${date.getDate()}`;
            } else {
              // 24小时数据显示小时
              timeStr = `${date.getHours()}:00`;
            }
            
            timeData.push(timeStr);
            temperatureData.push(item.temperature);
            humidityData.push(item.humidity);
            lightData.push(item.light);
            co2Data.push(item.co2);
          });
          
          // 更新图表
          environmentChart.setOption({
            xAxis: [{
              data: timeData
            }],
            series: [
              { data: temperatureData },
              { data: humidityData },
              { data: lightData },
              { data: co2Data }
            ]
          });
        })
        .catch(error => {
          console.error('加载数据失败:', error);
          // 显示错误信息
          document.getElementById('chartContainer').innerHTML = 
            '<div style="display: flex; justify-content: center; align-items: center; height: 100%; color: red;">' +
            '数据加载失败，请稍后再试' +
            '</div>';
        });
    }
    
    // 页面加载完成后初始化
    window.addEventListener('load', () => {
      renderAnnouncements();
      renderDevices();
      initEnvironmentChart();
      loadUserInfo();
    });
    
    // 加载用户信息
    function loadUserInfo() {
      fetch('userServlet?actionType=getCurrentUser')
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          // 显示登录账号，如果用户姓名是"普通用户"则不显示
          const userName = data.user.userName === "普通用户" ? data.user.loginAccount : data.user.userName;
          const userAvatar = document.getElementById('userAvatar');
          const userNameElement = document.getElementById('userName');
          
          // 更新用户名显示
          userNameElement.textContent = userName;
          
          // 更新头像显示（取用户名的第一个字）
          userAvatar.textContent = userName.charAt(0);
        } else {
          // 如果获取用户信息失败，显示默认值
          const userAvatar = document.getElementById('userAvatar');
          const userNameElement = document.getElementById('userName');
          userNameElement.textContent = "未知用户";
          userAvatar.textContent = "?";
        }
      })
      .catch(error => {
        console.error('获取用户信息失败:', error);
        // 如果获取用户信息失败，显示默认值
        const userAvatar = document.getElementById('userAvatar');
        const userNameElement = document.getElementById('userName');
        userNameElement.textContent = "未知用户";
        userAvatar.textContent = "?";
      });
    }
    
    // 窗口大小变化时，重新调整图表大小
    window.addEventListener('resize', () => {
      if (environmentChart) {
        environmentChart.resize();
      }
    });
    
    // 用户下拉菜单功能
    document.addEventListener('DOMContentLoaded', function() {
      const userAvatar = document.getElementById('userAvatar');
      const userDropdown = document.getElementById('userDropdown');
      
      // 点击头像显示/隐藏下拉菜单
      userAvatar.addEventListener('click', function(e) {
        e.stopPropagation();
        userDropdown.classList.toggle('show');
      });
      
      // 点击页面其他地方隐藏下拉菜单
      document.addEventListener('click', function() {
        userDropdown.classList.remove('show');
      });
      
      // 阻止下拉菜单内部点击事件冒泡
      userDropdown.addEventListener('click', function(e) {
        e.stopPropagation();
      });
    });
    
    // 显示个人设置
    function showProfile() {
      // 跳转到个人设置页面
      window.location.href = 'profile.jsp';
    }
    
    // 退出登录
    function logout() {
      if (confirm('确定要退出登录吗？')) {
        // 清除session信息
        fetch('logout', {
          method: 'POST'
        })
        .then(response => {
          if (response.ok) {
            // 退出成功，跳转到登录页
            window.location.href = 'login.jsp';
          } else {
            alert('退出登录失败，请稍后再试');
          }
        })
        .catch(error => {
          console.error('退出登录失败:', error);
          alert('退出登录失败，请稍后再试');
        });
      }
    }
    
    // 切换图表数据
    function switchChartData(dataType) {
      // 更新按钮状态
      document.getElementById('btn24Hours').classList.remove('active');
      document.getElementById('btn7Days').classList.remove('active');
      
      if (dataType === '24hours') {
        document.getElementById('btn24Hours').classList.add('active');
      } else {
        document.getElementById('btn7Days').classList.add('active');
      }
      
      // 重新加载数据
      loadEnvironmentData(dataType);
    }
  </script>
</head>
<body>
<div class="particles"></div>

<!-- 顶部导航 -->
<div class="header">
  <div class="logo">
    <div class="logo-icon">🌱</div>
    <h1>智慧农业管理系统</h1>
  </div>
  <div class="user-info">
    <span id="userName">加载中...</span>
    <div class="avatar" id="userAvatar">...</div>
    <div class="dropdown-menu" id="userDropdown">
      <a href="#" class="dropdown-item" onclick="showProfile()">个人设置</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item" onclick="logout()">退出登录</a>
    </div>
  </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
  <!-- 左侧导航 -->
  <div class="sidebar">
    <div class="nav-group">
      <div class="nav-title">系统导航</div>
      <a href="main.jsp" class="nav-item active">系统首页</a>
      <a href="deviceManagement.jsp" class="nav-item">设备管理</a>
    </div>

    <div class="nav-group">
      <div class="nav-title">农业管理</div>
      <a href="environmentMonitor.jsp" class="nav-item">环境监测</a>
      <a href="pestControl.jsp" class="nav-item">病虫害防治</a>
      <a href="irrigationControl.jsp" class="nav-item">灌溉施肥</a>
    </div>

    <div class="nav-group">
      <div class="nav-title">系统设置</div>
      <a href="userServlet?actionType=list" class="nav-item">用户管理</a>
      <a href="system_config.jsp" class="nav-item">系统配置</a>
      <a href="tech.jsp" class="nav-item">技术支持</a>
      <a href="we.jsp" class="nav-item">关于我们</a>
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="content">
    <!-- 数据概览 -->
    <div class="dashboard">
      <div class="data-card">
        <div class="card-icon">💧</div>
        <div class="card-title">灌溉系统</div>
        <div class="card-value">12 台</div>
      </div>

      <div class="data-card">
        <div class="card-icon">🌡️</div>
        <div class="card-title">环境监测</div>
        <div class="card-value">8 台</div>
      </div>

      <div class="data-card">
        <div class="card-icon">🐛</div>
        <div class="card-title">病虫害监测</div>
        <div class="card-value">5 台</div>
      </div>

      <div class="data-card">
        <div class="card-icon">📊</div>
        <div class="card-title">数据分析</div>
        <div class="card-value">24 项</div>
      </div>
    </div>

    <!-- 主要内容网格 -->
    <div class="content-grid">
      <!-- 左侧内容 -->
      <div class="left-column">
        <!-- 数据图表 -->
        <div class="chart-panel">
          <div class="chart-title">环境数据趋势</div>
          <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
            <button id="btn24Hours" class="chart-btn active" onclick="switchChartData('24hours')">24小时</button>
            <button id="btn7Days" class="chart-btn" onclick="switchChartData('7days')">7天</button>
          </div>
          <div id="chartContainer" class="chart-container" style="height: 250px;">
            <!-- 图表将在这里渲染 -->
          </div>
        </div>

        <!-- 设备状态 -->
        <div class="device-status">
          <div class="chart-title">设备状态</div>
          <div class="device-list">
            <!-- 设备列表将通过JavaScript渲染 -->
          </div>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="right-column">
        <!-- 公告栏 -->
        <div class="announcement-panel">
          <div class="panel-header">系统公告</div>
          <div class="announcement-list">
            <!-- 公告将通过JavaScript渲染 -->
          </div>
        </div>

        <!-- 快捷工具 -->
        <div class="announcement-panel" style="margin-top: 25px;">
          <div class="panel-header">快捷工具</div>
          <div class="announcement-list">
            <div class="announcement-item">
              <a href="#" class="action-btn view" style="display: block; text-align: center; padding: 10px;">
                生成报告
              </a>
            </div>
            <div class="announcement-item">
              <a href="#" class="action-btn control" style="display: block; text-align: center; padding: 10px;">
                远程控制
              </a>
            </div>
            <div class="announcement-item">
              <a href="#" class="action-btn view" style="display: block; text-align: center; padding: 10px;">
                数据导出
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 页脚 -->
<div class="footer">
  <p>© 2025 智慧农业技术体系项目 | 联合中国科学院大学、东北农业大学、黑龙江八一农垦大学共同开发</p>
</div>
</body>
</html>